<template>
  <view class="quick-com">
    <!-- 首先是陪诊就医和陪护 -->
    <view class="big">
      <view @click="gotoProjectList(item.id,item.name)" class="peizhen" v-for="(item,index) in bigprojectList" :key="item.id">
        <image :src="item.icon"
          mode="aspectFill" />
      </view>
    </view>
    <view class="small">
      <view @click="gotoProjectList(item.id,item.name)" class="item" v-for="(item,index) in smprojectList" :key="index">
        <view>
          <image :src="item.icon" />
        </view>
        <view class="title">
          {{item.name}}
        </view>
      </view>
      <view class="item" @click="gotoPoject">
        <view>
          <image src="http://218.28.225.151:9000/xingyuepeizhen/更多服务.png" />
        </view>
        <view class="title">
          更多服务
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted
  } from 'vue'
  import * as http from '@/utils/http'
  const bigprojectList = ref([])
  const smprojectList = ref([])
  onMounted(async () => {
    const result = await http.getRequest("/peizhen/project/list")
    if (result.code == 0) {
      const project = result.data
      bigprojectList.value = project.slice(0, 2); // 取出开头的两个元素
      smprojectList.value = project.slice(2); // 取出剩余的所有元素
    } else {
      uni.showToast({
        title: '获取服务失败',
        icon: 'error',
        duration: 1000
      })
    }
  })
  //跳转到项目列表页面
  function gotoProjectList(projectId,projectName){
    uni.navigateTo({
      url:`/pages/project/project-list/project-list?projectId=${projectId}&projectName=${projectName}`
    })
  }
  function gotoPoject(){
    uni.switchTab({
      url:'/pages/project/project'
    })
  }
</script>

<style lang="scss" scoped>
  .quick-com {
    padding: 20rpx;
    background-color: $uni-bg-color;

    .big {
      display: flex;
      justify-content: space-around;

      .peizhen {
        image {
          width: 340rpx;
          height: 180rpx;
          border-radius: 20rpx;
        }
      }
    }

    .small {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;

      .item {
        margin-top: 30rpx;
        margin-right: 10rpx;
        margin-bottom: 30rpx;
        border-radius: 9rpx;
        width: 140rpx;
        height: 140rpx;


        image {
          width: 140rpx;
          height: 140rpx;
          border-radius: 10rpx;
        }

        .title {
          font-family: "youshe";
          font-size: 35rpx;
          color: #43beb3;
          background-color: #dff7f5;
          border-radius: 10rpx;
        }

      }
    }
  }
</style>